<template>
	<div class="r_itemt">
		<van-nav-bar :fixed="true" :border="false" title="充值" left-arrow @click-left="onClickLeft" />
		
		<div class="r_top">
			<p>USDT钱包地址：</p>
			<div class="rt_bottom">
				<span>{{ustd.addres}}</span>
				<div class="r_copy" @click="copy(ustd.addres)">复制</div>
			</div>
			<div class="rt_bottom" >
				<span>USDT-ERC20 二维码收款地址</span>
				<div class="r_copy" @click="R_QRshow = true">点击查看</div>
			</div>
		</div>
		
		<p class="r_upTitle">上传凭证</p>
		
		<div class="r_upload">
			<div class="r_uploadImg">
				
				<input type="file"  @change="upLoad($event)">
				<img v-if="voucher" :src="voucher" alt="">
				<p v-if="!voucher">+上传付款凭证</p>
			</div>
			
			<div class="ru_bottom">
				<span>金额</span>
				<input type="number" v-model="money" placeholder="输入充值的金额">
			</div>
			
			<div class="ru_bottom">
				<span>备注</span>
				<input type="text" v-model="memo" placeholder="请输入备注您的信息（如账号、信息）">
			</div>
		</div>
		<p class="r_zy">事项：充币时请选择USDT-ERC20链接通道，勿向该地址充值非USDT-ERC20资产否则资产将不可找回。</p>
		<div class="r_qr" @click="confirmRecharge">确认充值</div>
		
		<van-popup v-model="R_QRshow" position="center" :style="{background:'transparent'}">
			<div style="background-color: transparent;">
				<img :src="this.myApp.GetDomaiName() + ustd.erweima">
			</div>
		</van-popup>
	</div>
		
</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
		Popup
	} from 'vant';
	
	import {UpLoad,RechargeAmount,getUSTD} from '../serve/api.js'

	Vue.use(NavBar);
	Vue.use(Popup);
	
	export default {
		created() {
			
			this.getUSTD()
			
		},
		data(){
			return{
				//USDT二维码是否显示
				R_QRshow:false,
				
				//凭证图片地址
				voucher:"",
				
				//充值备注
				memo:"",
				
				//充值的金额
				money:null,
				
				//ustd地址
				ustd:""
				
			}
		},
		
		methods: {
			//获取USET充值地址
			getUSTD(){
			
				let params;
			
				getUSTD( params , (res) => {
					
					this.ustd = res.data.data
					
				}, (error) => {
					
					this.ustd = '网络繁忙'
					
				})
			
			},
			
			//确认充值
			confirmRecharge(){
				
				if(this.voucher.length <= 0){
					
					Toast('请上传支付凭证');
					
					return;
					
				}
				
				if(this.money <= 0 || this.money == null){
					
					Toast('请输入正确的充值金额');
					
					return;
					
				}
				
				if(this.memo.trim().length < 6){
					
					Toast('备注最少输入6个字');
					
					return;
					
				}
				
				let params = {
					
					pic:this.voucher,
					
					memo:this.memo,
					
					money:Number(this.money)
				}
				
				RechargeAmount( params , (res) => {
					
					Toast(res.data.msg);
					
					if(res.data.code == 1){
						
						this.voucher = ""
						
						this.memo = ""
						
						this.money = null
						
						this.ustd = ""
						
						setTimeout( () =>{
							
							this.$router.go(-1)
							
						},1500)
						
					}
					
				},(error) => {
					
					Toast("提交失败");
					
				})
				
			},
			
			//上传凭证
			upLoad(e){
				
				// console.log(e.target.files[0])
				
				let params = new FormData();
				
				params.append('file' , e.target.files[0])
				
				return UpLoad(params,(res) => {
					
					if(res.data.code == 1){
						
						this.voucher = this.myApp.GetDomaiName() + res.data.info
						
					}
					
					Toast(res.data.msg);
					
				},(error) => {
					
					Toast('上传失败');
					
				})
				
			},
			
			copy(text){
				
				console.log(text)
								
				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', text);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					Toast("成功复制到剪切板！")
				}
				document.body.removeChild(input);
				
			},
			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			},
			onClickRight() {
				Toast('按钮');
			},
		},
	};
</script>

<style scoped="">
	.r_zy{
		font-size: .28rem;
		padding: 0.2rem .55rem;
		box-sizing: border-box;
		color: rgba(0,0,0,0.2);
	}
	
	.r_qr{
		width:3.8rem;
		height:.66rem;
		background:rgba(29,88,255,1);
		border-radius:.33rem;
		margin: auto;
		margin-top: .88rem;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .28rem;
	}
	
	.ru_bottom input{
		margin-left: .3rem;
		/* border-bottom: 1px solid black; */
		width: 5.1rem;
		padding-bottom: .08rem;
	}
	
	.ru_bottom{
		margin-top: .48rem;
	}
	
	.r_uploadImg input{
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	
	.r_uploadImg img{
		width: 100%;
		/* height: 100%; */
	}
	
	.r_uploadImg{
		overflow-y: scroll;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width:4.7rem;
		height:2.9rem;
		/* background:rgba(224,224,224,1); */
		border: 2px dashed rgba(0,0,0,0.2);
		margin: auto;
		color: rgba(0,0,0,0.2);
		font-weight: bold;
		font-size: .42rem;
	}
	
	.r_upload{
		background-color: white;
		font-size: .28rem;
		width: 100%;
		padding: .45rem .45rem .5rem .59rem;
		box-sizing: border-box;
		
	}
	
	.r_upTitle{
		margin: .2rem .27rem;
		font-size: .28rem;
		margin: ;
	}
	
	.r_copy{
		padding: .03rem .16rem;
		box-sizing: border-box;
		border:1px solid rgba(29,88,255,1);
		border-radius:.1rem;
		color: #3B70FE;
		text-align: center;
	}
	
	.rt_bottom span{
		font-weight: bold;
		width: 4rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap
	}
	
	.rt_bottom{
		margin-top: .37rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	
	.r_top {
		margin-top: .18rem;
		background-color: white;
		font-size: .28rem;
		width: 100%;
		padding: .45rem .45rem .5rem .59rem;
		box-sizing: border-box;
	}

	.r_itemt {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		border: #0034C9;
		background-color: #FBFBFB;
		padding-top: 40px;
		padding-bottom: 40px;
	}
</style>
